<template>
    <div class="container-wrapper">
        <el-container class="box" style="border: solid 1px #5d7db3; margin: 35px;">
            <el-header>
                <div class="header">
                    <h2>{{ topic }}</h2>
                    <p>发布日期：{{ formatDate(publishTime) }} &nbsp;&nbsp; 点击量：[ {{ clickNum }} ]</p>
                </div>
            </el-header>
            <el-main>
                <div v-html="content" class="ql-editor"></div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
// import axios from 'axios';

export default {
    data() {
        return {
            topic: '',
            publishTime: '',
            clickNum: '',
            content: '',
            styledContent: ''
        };
    },
    created() {
        this.fetchArticle();
    },
    methods: {
        formatDate(dateTimeString) {
            if (dateTimeString) {
                const parts = dateTimeString.split('T');
                return parts[0];
            }
        },
        /*fetchArticle() {
            const articleId = this.$route.params.articleId;
            console.log(articleId)
            axios.get(`/article/findByArtId/${articleId}`)
                .then(response => {
                    if (response.data.code === 200) {
                        this.topic = response.data.data.topic;
                        this.publishTime = response.data.data.publishTime;
                        this.clickNum = response.data.data.clickNum.toString();
                        this.content = response.data.data.content;
                        this.styledContent = this.content.replace(/<p>/g, '<p style="text-indent: 2em;">');
                    } else {
                        console.error('获取文章数据时出错:', response.data.msg);
                    }
                })
                .catch(error => {
                    console.error('Error fetching article data:', error);
                });
        },*/
    }
}  
</script>
<style scroped>
.container-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header h2 {
    color: rgb(3, 73, 144);
    text-align: center;
}

.header p {
    background-color: rgb(246, 246, 246);
    text-align: center;
    height: 35px;
    line-height: 35px;
    margin-top: 20px;
}

.ql-editor {
    margin-top: 20px;
    padding: 12px 0px !important;
}

.ql-editor p {
    letter-spacing: 1px;
    line-height: 25px;
    text-indent: 2em;
}

.ql-editor img {
    width: 600px;
    height: 400px;
}
</style>